<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            border-bottom: 1px solid orange;
            color: orange;
        }
    </style>
</head>

<body>

    <div>666</div>


    <span class="active">111</span>
    <span>222</span>
    <span>333</span>

    <script>

        // 鼠标事件
        //   鼠标单击  click
        //   鼠标双击  dblclick 
        //   鼠标移入移出
        //       mouseenter / mouseleave
        //       mouseover / mouseout    建议使用
        //   鼠标移动事件
        //       mousemove   --- 高频率事件

        //   鼠标抬起和鼠标按下
        //      mouseup
        //      mousedown

        var oDiv = document.querySelector('div');
        oDiv.addEventListener('click', function () {
            console.log('单击');
        })
        oDiv.addEventListener('dblclick', function () {
            console.log('双击');
        })

        // 鼠标移入移除
        oDiv.addEventListener('mouseenter', function () {
            console.log('鼠标enter');
        })
        oDiv.addEventListener('mouseleave', function () {
            console.log('鼠标leave');
        })

        oDiv.addEventListener('mouseover', function () {
            console.log('鼠标over');
        })
        oDiv.addEventListener('mouseout', function () {
            console.log('鼠标out');
        })


        // 鼠标移动事件
        oDiv.addEventListener('mousemove', function () {
            console.log('鼠标move');

        })


        oDiv.addEventListener('mousedown', function () {
            console.log('鼠标按下');

        })

        oDiv.addEventListener('mouseup', function () {
            console.log('鼠标抬起');

        })


        var oSpans = document.querySelectorAll('span');
        for (var i = 0; i < oSpans.length; i++) {
            oSpans[i].addEventListener('mouseover', function () {
                for (var i = 0; i < oSpans.length; i++) {
                    oSpans[i].classList.remove('active');
                }
                this.classList.add('active')
            })
        }

    </script>

</body>

</html>